<template>
    <view>
		  <button class="login-btn" type="primary" @click="getUserInfo" v-if="nickName ==''">
		        微信用户一键登录
		      </button>
		

        <view class="user">
            <view class="paddin"></view>
            <view class="header bg-color acea-row row-between-wrapper">
                <view class="picTxt acea-row row-between-wrapper" @tap="goLogin">
                    <view class="pictrue"><image :src="avatarUrl"></image></view>
                    <view class="text">
                        <view class="acea-row row-middle">
                            <view class="name line1">{{ nickName || '请授权' }}</view>
                        </view>
                        <view class="id2">
                            <text>{{ userInfo.introduction || '请完善简介' }}</text>
                            <button
                                class="change"
                                :plain="true"
                                style="width: 80rpx; height: 36rpx; display: block; box-sizing: border-box; left: 196rpx; top: 0rpx; position: relative"
                                @tap="goProfile"
                            >
						
                                修改
                            </button>
                        </view>

                        <view class="id">{{ userInfo.school || '请完善学校信息' }}</view>
                    </view>
                </view>
            </view>
            <view class="wrapper">
                <view class="nav acea-row row-middle" style="width: 710rpx; height: 170rpx; display: flex; box-sizing: border-box">
                    <button class="item" @tap="goSpace" hover-class="none" style="width: 256rpx; height: 152rpx; display: block; ">
                        <uni-icons type="pyq" size="26"></uni-icons>
                        <view class="title" style="margin-top: -30rpx;">我的打卡空间</view>
                    </button>

                    <button class="item" @tap="goAssess" hover-class="none" style="width: 256rpx; height: 152rpx; display: block; ">
                        <uni-icons type="compose" size="26"></uni-icons>
                        <view class="title" style="margin-top: -30rpx;">我的评估</view>
                    </button>

                    <button class="item" @tap="goPost" hover-class="none" style="width: 256rpx; height: 152rpx; display: block;">
                        <view class="pictrue">
                            <uni-icons custom-prefix="iconfont" type="icon-upload" size="26"></uni-icons>
                        </view>
                        <view class="title" style="margin-top: -30rpx;">我的发帖</view>
                    </button>
                </view>

                <navigator url="/pages/user/identify/identify" class="assess">
                    <view class="title acea-row row-between-wrapper">
                        <view class="jhx_f4" style="padding: 30rpx">校园认证</view>
                    </view>
                </navigator>

                <navigator url="/pages/user/feedback/feedback" class="feedBack">
                    <view class="title acea-row row-middle jhx_f4" style="padding: 30rpx">意见反馈</view>
                </navigator>

                <navigator url="/pages/user/version/version" class="version">
                    <view class="title acea-row row-middle jhx_f4" style="padding: 30rpx">版本信息</view>
                </navigator>

                <navigator url="" class="logout">
                    <view class="title acea-row row-middle jhx_f4" style="padding: 30rpx" @tap="">退出登录</view>
                </navigator>
            </view>
        </view>

        <authorize @onLoadFun="onLoadFun"></authorize>
    </view>
</template>

<script>
//import baseURL from '../../../main.js'
// pages/ucenter/index/index.js
export default {
    data() {
        return {
			showNote: true,
			avatarUrl:'',
			nickName:'',
            userInfo: {
                
            },
			appid: 'wxa065435a8843b4c7',
        };
    },

	
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
	     // 展示加载框
	     
	   
		    

		

	},
	
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
		/**
		     *
		     * 获取用户信息
		     */
		    getUserInfo() {
		      // 展示加载框
		      uni.showLoading({
		        title: '加载中',
		      });
		      uni.getUserProfile({
		        desc: '登录后可同步数据',
		        success: async (obj) => {
				  console.log(obj)
		          this.avatarUrl = obj.userInfo.avatarUrl;
				  this.nickName = obj.userInfo.nickName;
				  uni.setStorage({
				  	key:'avater',
					data:this.avatarUrl,
				  })
				  uni.setStorage({
				  	key:'nickname',
					data:this.nickName
				  })
		          // 调用 action ，请求登录接口
		          uni.login({
		            provider: 'weixin',
		            success: async (res) => {
		              this.code = res.code;
		              console.log('登录获取code', res.code);
		              if (res.errMsg == 'login:ok') {
						  console.log("okok")
						  this.showNote = false;
		                 this.loginAuth({

		                  code: this.code,
		                });
						
						// 登录
			
		              }
		            },
		          });
				  
		        },
		        fail: () => {
		          uni.showToast({
		            title: '授权已取消',
		            icon: 'error',
		            mask: true,
		          });
		        },
		        complete: () => {
		          // 隐藏loading
		          uni.hideLoading();
		        },
		      });
		    
		  },
		
		
		loginAuth(data) {
			console.log(data)
		  return uni.request({
				url: this.$baseUrl+'/user/login/'+data.code,
				method: 'GET',
					success: res => {
						console.log(res.data.data);	
						this.userInfo = res.data.data,
						uni.setStorage({
							key:'userInfo',
							data:res.data.data,
							success: function () {
								console.log("set Userinfo success!");
								const sessions = res.data.data.sessionId
								
							}
						});
						uni.setStorage({
							key:'userId',
							data:res.data.data.id,
							success: function () {
								console.log("set Userid success!");
								
								
							}
						});
						uni.setStorage({
							key:'sessionId',
							data:res.data.data.sessionId,
							success: function () {
								console.log("set sessionid success!");
							}
						});
						
						console.log(this.$sessionId)
						
				},
					fail: (e) => {
						console.log(e)
						uni.showToast({
						  title: '登录失败',
						  icon: 'error',
						  mask: true,
						});
				},
				complete: () => {}
			});
		  
		},
		
        goProfile: function (e) {
            console.log();

            if (this.hasLogin) {
                uni.navigateTo({
                    url: e.currentTarget.dataset.url
                });
            } else {
                uni.navigateTo({
                    url: '/pages/user/profile/profile'
                });
            }
        },

        goSpace: function (e) {
            console.log();

            if (this.hasLogin) {
                uni.navigateTo({
                    url: e.currentTarget.dataset.url
                });
            } else {
                uni.navigateTo({
                    url: '/pages/user/space/space'
                });
            }
        },

        goAssess: function (e) {
            console.log();

            if (this.hasLogin) {
                uni.navigateTo({
                    url: e.currentTarget.dataset.url
                });
            } else {
                uni.navigateTo({
                    url: '/pages/user/assess/assess'
                });
            }
        },

        goPost: function (e) {
            console.log();

            if (this.hasLogin) {
                uni.navigateTo({
                    url: e.currentTarget.dataset.url
                });
            } else {
                uni.navigateTo({
                    url: '/pages/user/post/post'
                });
            }
        },

        
    }
};
</script>
<style>
.user .header {
    padding: 0 30rpx;
    height: 190rpx;
    position: relative;
}
.paddin {
    height: 50px;
    width: 100%;
    background-color: #f2f2f2;
}

.user .header:after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -98rpx;
    z-index: -1;
    content: '';
    height: 130rpx;
    width: 100%;
    background-color: white;
}
.user .header .picTxt .pictrue {
    width: 120rpx;
    height: 120rpx;
}
.user .header .picTxt .pictrue image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #f5f5f5;
}
.user .header .picTxt .text {
    width: 434rpx;
    color: black;
    margin-left: 35rpx;
}
.user .header .picTxt .text .name {
    color: black;
    font-size: 36rpx;
    max-width: 470rpx;
}
.user .header .picTxt .text .member {
    padding: 0 10rpx;
    height: 36rpx;
    background-color: rgba(0, 0, 0, 0.2);
    font-size: 20rpx;
    border-radius: 30rpx;
    margin-left: 17rpx;
}
.user .header .picTxt .text .member image {
    width: 22rpx;
    height: 22rpx;
    font-size: 20rpx;
    margin-right: 8rpx;
}
.user .header .picTxt .text .id {
    color: black;
    font-size: 26rpx;
    margin-top: 15rpx;
}
.user .header .picTxt .text .id2 {
    color: black;
    font-size: 20rpx;
    margin-top: 15rpx;
    display: flex;
}
.user .header .picTxt .text .id2 .change {
    color: black;
    font-size: 15rpx;
    padding: 0.5rpx;
    font-weight: normal;
    
}
.user .header .icon-shezhi {
    font-size: 38rpx;
    color: black;
    margin-top: 15rpx;
    margin-right: 30rpx;
}
.user .wrapper {
    padding: 0 20rpx;
}
.user .wrapper .nav {
    background-color: #fff;
    border-radius: 20rpx;
    height: 140rpx;
    box-shadow: 0 0 6px 0 rgba(151, 151, 151, 0.2);
}
.user .wrapper .nav .item {
    flex: 1;
    text-align: center;
    background-color: white;
}
.user .wrapper .nav .item ~ .item {
    border-left: 1px solid #eee;
}
.user .wrapper .nav .item .title {
    font-size: 23rpx;
    color: #666;
}
.user .wrapper .nav .item .num {
    margin-top: 16rpx;
    font-size: 36rpx;
    color: rgb(223, 8, 8);
}
.user .wrapper .nav .item .text {
    margin-top: 16rpx;
    font-size: 30rpx;
}
.user .wrapper .feedBack {
    background-color: #fff;
    border-radius: 10rpx;
    margin-top: 1rpx;
}
.user .wrapper .version {
    background-color: #fff;
    border-radius: 10rpx;
    margin-top: 2rpx;
}
.user .wrapper .assess {
    background-color: #fff;
    margin-top: 100rpx;
    margin-top: 100rpx;
    border-radius: 10rpx;
}
.user .wrapper .logout {
    background-color: #fff;
    margin-top: 100rpx;
    margin-top: 100rpx;
    border-radius: 10rpx;
}
.user .support {
    width: 219rpx;
    height: 74rpx;
    margin: 54rpx auto;
    display: block;
}
.item_badge {
    height: 32rpx;
    width: 32rpx;
    position: absolute;
    background: #b4282d;
    color: #f2f2f2;
    font-size: 28rpx;
    border-radius: 50%;
    margin-top: 0rpx;
    margin-left: 40rpx;
}

</style>
